﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="JS/jquery-3.6.1.min.js"></script>
    <style>

    </style>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"></div><div class="arrowRight"></div>
</div>
</body>

<script>
    $(function () {
        $(".adver").mouseover(function () {
            $(".arrowRight").show();
            $(".arrowLeft").show();
        })
        $(".adver").mouseout(function () {
            $(".arrowRight").hide();
            $(".arrowLeft").hide();
        })
        let index = 1;
        $(".arrowLeft").click(function () {
            if(index <= 1){
                alert("已经是最左边了");
                return;
            }
            index --;
            $(".adver").css("background","url(images/adver0" + index + ".jpg)");
            $("li:nth-of-type("+index+")").css("background","orange");
            $("li:nth-of-type("+index+")").siblings().css("background","#333333");

        });
        $(".arrowRight").click(function () {
            if(index >= 6){
                alert("已经是最右边了");
                return;
            }
            index ++;
            $("li:nth-of-type("+index+")").css("background","orange");
            //siblings()除了我自己的其他兄弟
            $("li:nth-of-type("+index+")").siblings().css("background","#333333");
            $(".adver").css("background","url(images/adver0" + index + ".jpg)");

        });
    })

</script>
</html>